<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button type="primary" v-if="hasPerm('menu:add')" icon="plus" @click="$refs.Form.open()"
      >新增菜单
      </a-button
      >
    </div>

    <a-table
      ref="table"
      size="middle"
      :rowKey="(record) => record.id"
      :pagination="false"
      :defaultExpandAllRows="true"
      :columns="columns"
      :dataSource="data"
      showPagination="auto"
    >
            <span slot="type" slot-scope="text">
                {{ typeFilter(text) }}
            </span>

      <span slot="icon" slot-scope="text">
          <a-icon :type="text"/>
      </span>

      <span slot="action" slot-scope="text, record">
                <template>
                    <a v-if="hasPerm('menu:edit')" @click=openEditForm(record)>编辑</a>
                    <a-divider type="vertical" v-if="hasPerm('menu:edit') & hasPerm('menu:delete')"/>
                    <a-popconfirm
                      v-if="hasPerm('menu:delete')"
                      placement="topRight"
                      title="删除本菜单与下级？"
                      @confirm="() => handleDel(record)"
                    ><a style="color: red">删除</a>
                    </a-popconfirm>
                    <a-divider type="vertical"
                               v-if="hasPerm('menu:edit') & hasPerm('menu:delete') & record.type === 1"/>
                    <a v-if="hasPerm('menu:edit') & record.type === 1" @click="$refs.btnForm.open(record)">按钮配置</a>
                </template>
            </span>
    </a-table>

    <s-form ref="Form" @ok="handleOk"/>
    <button-form ref="btnForm" @ok="handleOk"/>
  </a-card>
</template>

<script>
  import * as api from '@/api/system/menuManage'
  import sForm from './Form'
  import buttonForm from './ButtonForm'

  const typeDict = [
    {
      code: 1,
      value: '菜单'
    },
    {
      code: 0,
      value: '目录'
    },
    {
      code: 2,
      value: '按钮'
    }
  ]

  export default {
    components: {
      sForm,
      buttonForm
    },

    data() {
      return {
        data: [],
        columns: [
          {
            title: '菜单名称',
            dataIndex: 'title',
            width: '20%'
          },
          {
            title: '菜单类型',
            dataIndex: 'type',
            scopedSlots: { customRender: 'type' }
          },
          {
            title: '图标',
            dataIndex: 'icon',
            scopedSlots: { customRender: 'icon' }
          },
          {
            title: '组件',
            dataIndex: 'component',
            ellipsis: true
          },
          {
            title: '路由地址',
            dataIndex: 'path',
            key: 'path',
            ellipsis: true
          },
          {
            title: '排序',
            dataIndex: 'sort'
          }
        ],
        typeDict
      }
    },
    created() {
      this.loadData()
      if (this.hasPerm('menu:edit') || this.hasPerm('menu:delete')) {
        this.columns.push({
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' }
        })
      }
    },
    methods: {
      loadData() {
        api.getList().then((res) => {
          this.data = res.data
        })
      },
      // type装换成文字
      typeFilter(type) {
        const values = this.typeDict.filter((item) => item.code === type)
        if (values.length > 0) {
          return values[0].value
        }
      },
      openEditForm(record) {
        if (record.type === 2) {
          this.$refs.btnForm.open(record, 'edit')
        } else {
          this.$refs.Form.open(record)
        }
      },
      handleOk() {
        this.loadData()
      },
      handleDel(record) {
        api.deleteObj(record.id)
          .then((res) => {
            if (!res.error) {
              this.$message.success('删除成功')
              this.loadData()
            } else {
              this.$message.error('删除失败：' + res.error)
            }
          })
      }
    }
  }
</script>
<style scoped>
  .table-operator {
    margin-bottom: 18px;
  }
</style>
